<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>精准列表</title>
<%#开始时间作为参数导入，结束时间根据实际时长进行显示%>
    <script type="text/javascript">
      Ext.chart.Chart.CHART_URL = 'javascripts/extjs/resources/charts.swf';
      var store
      var panel
      var stacked_bar_chart
      var train_id = <%=params[:train_id]%>
      var numAxis

      Ext.onReady(function(){

        var task_begin_minute = <%=params[:task_begin_minute]%>                   //设置默认起始时间，18点，即1080分钟。这是图表的起始点
        train_task_id = <%=params[:id]%>                                      //从前面的链接得到id的值

        var trainTaskTemplate = new Ext.XTemplate('<tpl for="."><div class="search-item">', '{train_name} - {sn}', '</div></tpl>');
        var trainTaskDS = new Ext.data.Store({
          proxy:new Ext.data.HttpProxy({url:'/traintask/get_active_tasks'}),
          reader:new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
          }, [
            {name:'sn'},                            //用作后面的displayField:
            {name:'id'},                                //用作后面的valueField:
            {name:'begin_time'},
            {
              name:'train_name',
              mapping:'train',
              convert:function(value){
                return value.sn
              }
            }
          ])
        });
        
        var train_task_combo = new Ext.form.ComboBox({  //配合上面的departmentDS，完成动态生成的下拉框
          store: trainTaskDS,
          hiddenName:'train_task_id',            //显示时：这里写后台传送过来的字段，一旦和valueField相等，就进行显示。不相等为空。
          displayField:'sn',              //store里面的值，用于显示在表面上的值
          valueField:'id',                  //store里面的值，和display联动
          typeAhead: true,
          minChars:1,
          readOnly:false,
          //anchor: '90%',                    //在容器中的时候，自动按照容器百分比进行调整，会覆盖宽度的属性
          width:140,
          mode: 'remote',
          fieldLabel:'维修任务选择',
          forceSelection: true,
          tpl: trainTaskTemplate,                 //加入上面的模板
          itemSelector: 'div.search-item',      //对Css进行选择，如果没有这一句，则选择不上了
          triggerAction: 'all',
          emptyText:'请选择维修任务.....',
          selectOnFocus:true,
          listeners:{
            select : function(combo, record,index){
              train_task_id = combo.value

              //获取开始时间
              task_begin_time = record.get('begin_time')

              //把开始时间转化为分钟
              var day = 2                                                       
              var hour = task_begin_time.slice(11,13)
              var minute = task_begin_time.slice(14,16)
              task_begin_minute = day*1440 + hour*60 + minute*1
              while (task_begin_minute> 1920)
              {
                task_begin_minute = task_begin_minute-1440
              }

              //把train_task_id作为参数传给store
              store.setBaseParam('train_task_id',train_task_id)
              readChartWin.setTitle(record.get('sn')+"的工作进度表");
                  
              store.load()
            }
          }
        });

        store = new Ext.data.Store({
          paramNames: {
            train_task_id: "train_task_id"
          },
          baseParams: {
            train_task_id: train_task_id
          },
          proxy: new Ext.data.HttpProxy({
            url: '/maintenance/get_full_charts'
          }),
          reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            root: 'root'
          }, [
            {name: 'team_name',mapping: 'team.name'},
            {name: 'work_name',mapping: 'work.name'},
            {name: 'train_task_id'},
            {name: 'begin_minute'},                                             //开始时间，距离beginMinute的时间，以分钟计
            {name: 'un_start_minute'},                                          //计划时间，以分钟计
            {name: 'during_minute'},                                            //持续时间，以分钟计
            {name: 'finish_minute'},
            {name: 'head_minute'},
            {name: 'foot_minute'}
          ])
        });

        var timeFormat = function(value){                                       //自己设置的分钟数
          var hour = Math.floor((1080+value)/60)                   //取得小时数
          var minute = 1080+value-hour*60                          //取得剩余分钟数
          if(1080+value>=1440){                                    //分钟数超过1440，即超过一天
            if(minute<10){                                                      //对比小时后，剩余分钟数小于十分钟
              return String(hour-24)+":"+"0"+String(minute);                    //结果会补个零
            }else{
              return String(hour-24)+":"+String(minute);                        //直接组合返回
            }
          }else{
            if(minute<10){                                                      //对比小时后，剩余分钟数小于十分钟
              return String(hour)+":"+"0"+String(minute);                       //结果会补个零
            }else{
              return String(hour)+":"+String(minute);                           //直接组合返回
            }
          }
        }

        numAxis = new Ext.chart.NumericAxis({
          stackingEnabled: true                                               //true:累加。false:并排放。
          ,labelRenderer: timeFormat                                          //x轴的标签，调用上面的function
          ,position: 'top'                                                    //更改标题位置
        })

        stacked_bar_chart = new Ext.chart.StackedBarChart({
          width: 884,
          height: 522,
          title: '工作进度表',
          store: store,
          yField: 'work_name',
          extraStyle:{
            legend:{
              display:'top'                                                     //用以在图表的顶端显示图例
            }
          },
          xAxis: numAxis,
          series: [
            {
              xField: 'head_minute',
              displayName: ' ',                                                 //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'ffffffff'                                               //将第一组设为白色，与底色相同，产生透明效果（这个要写8个f，而不是传统的6个）
              }
            }
            ,{
              xField: 'begin_minute',
              displayName: ' ',                                                 //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'ffffffff'                                               //将第一组设为白色，与底色相同，产生透明效果（这个要写8个f，而不是传统的6个）
              }
            }
            ,{
              xField: 'during_minute',
              fieldLabel: 'during_minute',
              displayName: '正在进行',                                           //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'FE9828',                                                 //正在进行，红色
                size:25                                                         //宽度
              }
            }
            ,{
              xField: 'finish_minute',
              fieldLabel: 'finish_minute',
              displayName: '已完工',                                             //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: '8DD5E7',                                                 //完成，蓝色
                size:25                                                         //宽度
              }
            }
            ,{
              xField: 'un_start_minute',
              fieldLabel: 'un_start_minute',
              displayName: '计划任务',                                            //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'B0B2B3',                                                 //计划任务，灰色
                size:25
              }
            },
            {
              xField: 'foot_minute',
              displayName: ' ',                                                 //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'ffffffff'                                               //将第一组设为白色，与底色相同，产生透明效果（这个要写8个f，而不是传统的6个）
              }
            }
          ]
          ,tipRenderer : function(chart, record){                               //进行渲染，可以对结果进行设置，此方法未收录在api中
            return Ext.util.Format.number(record.data.team_name) + '的'+
              Ext.util.Format.number(record.data.work_name)+'任务，耗时' +
              Ext.util.Format.number(record.data.during_minute) + '分钟';
          }
        })

        panel = new Ext.Panel({
          tbar:[
            '-','进行中维修任务：',train_task_combo,'-',
            {text:'查看精准时间图',
              width:50,
              incomCls:'',
              handler:function(){
                readChartWin.close();
                var id = <%=params[:id]%>;
                var train_id = <%=params[:train_id]%>;
                var task_begin_minute = <%=params[:task_begin_minute]%>;
                readChartWin = new Ext.Window({                                         //window和上面的fuction不能重名，否则会出问题
                  layout: 'fit',
                  width:939,
                  height:589,
                  closeAction: 'destroy',
                  autoLoad: {
                    url: "/maintenance/chart",
                    params:{id:id,task_begin_minute:task_begin_minute,train_id:train_id},
                    scripts: true
                  },
                  plain: true,
                  modal: true,
                  constrain:true,
                  autoScroll: true,
                  draggable: false                                                      //不能拖动
                });
                readChartWin.on("destroy",function(){
                  clearInterval(interval);
                  trainTaskDS.reload();
                });
                readChartWin.setTitle(train_task_sn+"的工作进度表");
                readChartWin.resizable = false;
                readChartWin.show();
                

              }
            },
            '->',
            {
              text:'全屏',
              width:50,
              iconCls:'maxItem',
              handler:function(){
                readChartWin.setPagePosition(0,0);
                readChartWin.setWidth(screenWidth);
                readChartWin.setHeight(screenHeight);
                stacked_bar_chart.setWidth(screenWidth-35);
                stacked_bar_chart.setHeight(screenHeight-65);
                window.moveTo(0,0);
                window.resizeTo(screenWidth,screenHeight);
              }
            },{
              text:'正常',
              width:50,
              iconCls:'undo',
              handler:function(){
                readChartWin.setPagePosition(200,50);
                readChartWin.setWidth(939);
                readChartWin.setHeight(589);
                stacked_bar_chart.setWidth(884);
                stacked_bar_chart.setHeight(522);
              }
            }
          ],
          items:[stacked_bar_chart],
          renderTo: 'chart_form'
        })

        store.load();                                                           //第一次进入窗体，加载store
        interval = setInterval("store.load()",5000)                             //每三秒钟重复进行一次store.load()操作
      });
    </script>
  </head>
  <body>
    <div id="chart_form"></div>
  </body>
</html>